/**
 * @name TodoItem
 * @desc 待办单项
 * @author darcrand
 * @version 2018-10-14
 */

import React, { Component } from "react"
import "./styles.css"

const timeFormat = time => {
    const date = new Date(time)
    return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
}

class TodoItem extends Component {
    static defaultProps = {
        index: 0,
        data: { id: 0, message: "" },
        handleRemoveTodoItem: id => {},
        handleToggleTodoStatus: id => {}
    }

    render() {
        const { index, data, handleRemoveTodoItem, handleToggleTodoStatus } = this.props
        return (
            <div className="todo-item">
                <span className={data.status ? "todo-item-message-done" : "todo-item-message"} onClick={() => handleToggleTodoStatus(data.id)}>
                    {index + 1}. {data.message} <i className="todo-date">({timeFormat(data.id)})</i>
                </span>
                <span className="todo-item-delete" onClick={() => handleRemoveTodoItem(data.id)}>
                    DELETE
                </span>
            </div>
        )
    }
}

export default TodoItem
